<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>数据统计</title>
        <link rel="stylesheet" href="../css/bootstrap.css">
        <link rel="stylesheet" type="text/css" href="../fonts/iconfont.css">
        <style>
            *{
                margin: 0;
                padding: 0;
            }
            body,html{
                width: 100%;
                height: 100%;
            }
            .warp{
                padding-top: 50px;
                padding-bottom: 50px;
                width:80%;
                margin: 0 auto;
                height:120%;
                background: #F3FAFF;
                display: flex;
                flex-direction: column;
                justify-content: space-around;

            }
            #main,#bottom{
                width:100%;
                height:50%;
                display: flex;
                justify-content: space-around;
                flex-basis: 49%;
                position: relative;
            }
            #BP,#daoshi{
                border: 1px solid #E9EDEF;
                border-radius:10px;
                flex-basis:55%;
            }
            #pic,#map{
                border: 1px solid #E9EDEF;
                border-radius:10px;
                flex-basis:40%;
                position: relative;;
            }
            #pic1{
                position: absolute;
                width:100%;
                height: 100%;
                top:0;
                left: 0;
            }
            .select{
                position: absolute;
                z-index: 2;
            }
            .button{
                overflow: hidden;
                position: absolute;
                bottom: 0;
                left: 50%;
                border: 1px solid #8792FB;
                border-radius:20px;
                margin-left:-85px;
                font-size:12px;
            }
            .button div{
                padding:5px 10px;
                float: left;
            }
            .button div.pic-active{
                background-color: #0bacff;
            }
            .selectMap{position: absolute;right: 50px;}
            .buttonMap{position: absolute;left: 80%;}
            .nav > li > a{padding-right: 0}
            .nav_lt_font a{margin-top: 20px;padding-right: 0;font-size: 16px;}
            .nav_font li{text-align: center;}
            .navbar{border: none;background-color: #fff;}
            .nav > li > a{padding-right: 0}
            .nav_lt_font a{margin-top: 20px;padding-right: 0;font-size: 16px;}
            .nav_font li{text-align: center;}
            .navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:focus{background: none;font-weight: bolder}


            .loginShow{width: 50px;height: 50px;border-radius: 50%;}
            .login_success{position: relative;}
            .list-group-item{background-color: #fff;z-index: 1000;}
            .login_success:hover .login_success_info{display: block;}
            .login_success_info{display: none;}

        </style>
    </head>
    <body>
    <!--导航-->
    <nav class="navbar navbar-default" >
        <div class="container" >
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="#">
                    <img alt="Brand" src="../img/logo.png" >
                </a>
            </div>

            <div class="collapse navbar-collapse " id="bs-example-navbar-collapse-1">
                <ul class="nav navbar-nav nav_lt_font nav_login">
                    <li ><a href="../index.html">首页 <span class="sr-only">(current)</span></a></li>
                    <li><a href="../html/cyzfw_index.html">创业者服务</a></li>
                    <li><a href="../html/touziren_index.html">投资者服务</a></li>
                    <li><a href="javascript:void(0);" class="tutorService">导师服务</a></li>
                    <li><a href="../html/xqfb_index.html">技术需求者</a></li>
                    <li><a href="../html/yixingdasai.html">熠星大赛</a></li>
                    <li class="active"><a href="index.html">大数据服务</a></li>
                </ul>
                <ul class="nav navbar-nav navbar-right nav_font">
                    <li>
                        <div class="form-group  has-feedback" style="margin-top: 20px">
                            <label class="control-label sr-only" for="inputSuccess5">Hidden label</label>
                            <input type="text" class="form-control" id="inputSuccess5" aria-describedby="inputSuccess5Status">
                            <span class="glyphicon glyphicon-search form-control-feedback" aria-hidden="true"></span>
                            <span id="inputSuccess5Status" class="sr-only">(success)</span>
                        </div>
                    </li>
                    <li class="login_hide"><a href="../html/denglu.html"><i class="iconfont icon-zhuce"></i><br>登陆</a></li>
                    <li class="login_hide"><a href="../html/zhuche.html"><i class="iconfont icon-denglu"></i><br>注册</a></li>
                    <li class="login_success"><a href="#"><img src="../img/020.jpg" class="loginShow"/></a>
                        <div class="list-group login_success_info" style="position: absolute;border-bottom: 0;width: 150px;left: -30px;" >
                            <a href="index.html" class="list-group-item tuichu">退出</a>
                        </div>
                    </li>

                </ul>
            </div>


        </div>
    </nav>

    <div class="warp">
        <div id="main">
            <div id="BP"></div>
            <div id="pic">
                <div class="select">
                    年份
                    <select class="" name="" id="chooseYear">
                        <option value="2016">2016</option>
                        <option value="2015">2015</option>
                        <option value="2014">2014</option>
                    </select>
                </div>
                <div id="pic1"></div>
                <div class="button buttonPie">
                    <div class="pic-active">投资领域</div>
                    <div>项目阶段</div>
                </div>
            </div>
        </div>



        <div id="bottom">
            <div id="daoshi"></div>
            <div id="map">

            </div>
            <div class="select selectMap" >
                年份
                <select class="" name="" id="chooseMapYear">
                    <option value="2016">2016</option>
                    <option value="2015">2015</option>
                    <option value="2014">2014</option>
                </select>
            </div>
            <div class="button buttonMap">
                <div class="pic-active">项目</div>
                <div>导师</div>
                <div>投资人</div>
                <div>成果</div>
            </div>
        </div>
    </div>



    </body>
    <script src="./js/echarts.min.js"></script>
    <script src="./js/china.js"></script>
    <script src="./js/jquery-2.1.1.min.js"></script>
    <script src="../js/bootstrap.min.js"></script>
    <script src="js/index.js"></script>
    <script type="text/javascript">

getData1();
function getData1() {
    var data1='',data2='';
    $.ajax({
        url:'http://114.112.96.184:18080/statistics/hotPb?type=1',
        type:'get',
        dataType:'JSON',
        async: false,
        success:function(data){
            var data = data.result;
            console.log(data)
            data1=data;

        }
    })
    $.ajax({
        url:'http://114.112.96.184:18080/statistics/hotPb?type=0',
        type:'get',
        dataType:'JSON',
        async: false,
        success:function(data){
            var data = data.result;
            console.log(data)

            data2=data;
        }
    })


    line1(data1,data2);

}

//getData2();
function getData2() {
    var data1='',data2='';
    $.ajax({
        url:'http://114.112.96.184:18080/statistics/hotTutor?type=1',
        type:'get',
        dataType:'JSON',
        async: false,
        success:function(data){
            var data = data.result;
            console.log(data)
            data1=data;

        }
    })
    $.ajax({
        url:'http://114.112.96.184:18080/statistics/hotTutor?type=0',
        type:'get',
        dataType:'JSON',
        async: false,
        success:function(data){
            var data = data.result;
            console.log(data)

            data2=data;
        }
    })


    line2(data1,data2);

}






function line1(data,datas) {
        //切换数据
        var dataBase = data;
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('BP'));


        var option = {
            baseOption: {
                timeline: {
                    // y: 0,
                    axisType: 'category',
                    // realtime: false,
                    // loop: false,
                    autoPlay: true,
                    // currentIndex: 2,
                    playInterval: 2000,
                    // controlStyle: {
                    //     position: 'left'
                    // },
                    data: [
                        '2014', '2015', '2016', '2017'
                    ],
                    itemStyle: {
                        emphasis: {
                            color: '#63C0EB'
                        }
                    },
                    checkpointStyle: {
                        color: '#63C0EB',
                        borderColor: '#63C0EB'
                    }
                },
                title: {
                    left: 'center'
                },
                tooltip: {},
                calculable: true,
                grid: {
                    x: 40,
                    x2: 100,
                    y2: 150,
                    top: 80,
                    bottom: 100
                },
                legend: {
                    right: 'right',
                    data: ['用户点击次数', '关注人数'],
                    selectedMode: 'single'

                },
                xAxis: [{
                    type: 'category',
                    axisLabel: {
                        'interval': 0,
                        rotate: '-30',
                        formatter: function (params) {
                            var newParamsName = "";// 最终拼接成的字符串
                            var paramsNameNumber = params.length;// 实际标签的个数
                            var provideNumber = 4;// 每行能显示的字的个数
                            if (paramsNameNumber > provideNumber) {
                                params = params.substring(0, 4) + '...'

                            }

                            newParamsName = params;

                            return newParamsName;
                        }
                    },
                    data: [
                        '1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'
                    ],
                    splitLine: {
                        show: false
                    }
                }],
                yAxis: [{
                    type: 'value',
                    name: '用户点击次数'
                }, {
                    type: 'value',
                    name: '关注人数'
                }],
                series: [{
                    name: '用户点击次数',
                    type: 'bar',
                    itemStyle: {
                        normal: {
                            color: '#63C0EB'
                        }
                    }
                }, {
                    name: '关注人数',
                    type: 'bar',
                    itemStyle: {
                        normal: {
                            color: '#87F1A9'
                        }
                    }
                }]
            },
            options: [{
                title: {
                    text: '2014全国热门BP统计'
                },
                series: [{
                    data: data['2014']
                }, {
                    yAxisIndex: 1,
                    data: datas['2014']
                }]
            }, {
                title: {
                    text: '2015全国热门BP统计'
                },
                series: [{
                    data: data['2015']
                }, {
                    yAxisIndex: 1,
                    data: datas['2015']
                }]
            }, {
                title: {
                    text: '2016全国热门BP统计'
                },
                series: [{
                    data: data['2016']
                }, {
                    yAxisIndex: 1,
                    data: datas['2016']
                }]
            }, {
                title: {
                    text: '2017全国热门BP统计'
                },
                series: [{
                    data: data['2017']
                }, {
                    yAxisIndex: 1,
                    data: datas['2017']
                }]
            }]
        };
        myChart.on('legendselectchanged', function (params) {
            console.log(params);
            if (params.name == "关注人数") {
                dataBase = datas;
            } else {
                dataBase = data;
            }
            myChart.setOption(option);
        })
        var aixsPb = [];
        for (i = 0; i < dataBase[2014].length; i++) {
            aixsPb.push(dataBase[2014][i].name);
        }
        option.baseOption.xAxis[0].data = aixsPb;
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);

        myChart.on('timelinechanged', function (timelineIndex) {
            aixsPb = [];
// 设置 每个series里的xAxis里的值
            var arrIndex = parseInt(timelineIndex.currentIndex);

                arrIndex = 2014 + arrIndex;
            for (i = 0; i < dataBase[arrIndex].length; i++) {
                aixsPb.push(dataBase[arrIndex][i].name);
            }
            option.baseOption.xAxis[0].data = aixsPb;
//            result = ['1', '2', '3', '4', '5', '6','7','8','9','10','11','12'];
//            if (arrIndex == 5) // 这里 5可理解为timeline节点数组的长度,此处的目的是防止 5.xAxis not found
//                arrIndex = 0
//            option.options[arrIndex].xAxis.data=data[arrIndex];

            myChart.setOption(option);
        });


    }

//    function line2(data,datas) {
//    //切换数据
//    var dataBase = data;
//    // 基于准备好的dom，初始化echarts实例
//    var myChart = echarts.init(document.getElementById('daoshi'));
//
//
//    var option = {
//        baseOption: {
//            timeline: {
//                // y: 0,
//                axisType: 'category',
//                // realtime: false,
//                // loop: false,
//                autoPlay: true,
//                // currentIndex: 2,
//                playInterval: 2000,
//                // controlStyle: {
//                //     position: 'left'
//                // },
//                data: [
//                    '2014', '2015', '2016', '2017'
//                ],
//                itemStyle: {
//                    emphasis: {
//                        color: '#63C0EB'
//                    }
//                },
//                checkpointStyle: {
//                    color: '#63C0EB',
//                    borderColor: '#63C0EB'
//                }
//            },
//            title: {
//                left: 'center'
//            },
//            tooltip: {},
//            calculable: true,
//            grid: {
//                x: 40,
//                x2: 100,
//                y2: 150,
//                top: 80,
//                bottom: 100
//            },
//            legend: {
//                x: 'right',
//                data: ['用户点击次数', '关注人数'],
//                selectedMode: 'single'
//
//            },
//            xAxis: [{
//                type: 'category',
//                axisLabel: {
//                    'interval': 0,
//                    rotate: '-30',
//                    formatter: function (params) {
//                        var newParamsName = "";// 最终拼接成的字符串
//                        var paramsNameNumber = params.length;// 实际标签的个数
//                        var provideNumber = 4;// 每行能显示的字的个数
//                        if (paramsNameNumber > provideNumber) {
//                            params = params.substring(0, 4) + '...'
//
//                        }
//
//                        newParamsName = params;
//
//                        return newParamsName;
//                    }
//                },
//                data: [
//                    '1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'
//                ],
//                splitLine: {
//                    show: false
//                }
//            }],
//            yAxis: [{
//                type: 'value',
//                name: '用户点击次数'
//            }, {
//                type: 'value',
//                name: '关注人数'
//            }],
//            series: [{
//                name: '用户点击次数',
//                type: 'bar',
//                itemStyle: {
//                    normal: {
//                        color: '#E1A5DB'
//                    }
//                }
//            }, {
//                name: '关注人数',
//                type: 'bar',
//                itemStyle: {
//                    normal: {
//                        color: '#87F1A9'
//                    }
//                }
//            }]
//        },
//        options: [{
//            title: {
//                text: '2014全国热门导师统计'
//            },
//            series: [{
//                data: data['2014']
//            }, {
//                yAxisIndex: 1,
//                data: datas['2014']
//            }]
//        }, {
//            title: {
//                text: '2015全国热门导师统计'
//            },
//            series: [{
//                data: data['2015']
//            }, {
//                yAxisIndex: 1,
//                data: datas['2015']
//            }]
//        }, {
//            title: {
//                text: '2016全国热门导师统计'
//            },
//            series: [{
//                data: data['2016']
//            }, {
//                yAxisIndex: 1,
//                data: datas['2016']
//            }]
//        }, {
//            title: {
//                text: '2017全国热门导师统计'
//            },
//            series: [{
//                data: data['2017']
//            }, {
//                yAxisIndex: 1,
//                data: datas['2017']
//            }]
//        }]
//    };
//    myChart.on('legendselectchanged', function (params) {
//        console.log(params);
//        if (params.name == "关注人数") {
//            dataBase = datas;
//        } else {
//            dataBase = data;
//        }
//        myChart.setOption(option);
//    })
////    var aixsPb = [];
////    for (i = 0; i < dataBase[2014].length; i++) {
////        aixsPb.push(dataBase[2014][i].name);
////    }
////    option.baseOption.xAxis[0].data = aixsPb;
//    // 使用刚指定的配置项和数据显示图表。
//    myChart.setOption(option);
//
//    myChart.on('timelinechanged', function (timelineIndex) {
//        aixsPb = [];
//// 设置 每个series里的xAxis里的值
//        var arrIndex = parseInt(timelineIndex.currentIndex);
//
//        arrIndex = 2014 + arrIndex;
//        for (i = 0; i < dataBase[arrIndex].length; i++) {
//            aixsPb.push(dataBase[arrIndex][i].name);
//        }
//        option.baseOption.xAxis[0].data = aixsPb;
////            result = ['1', '2', '3', '4', '5', '6','7','8','9','10','11','12'];
////            if (arrIndex == 5) // 这里 5可理解为timeline节点数组的长度,此处的目的是防止 5.xAxis not found
////                arrIndex = 0
////            option.options[arrIndex].xAxis.data=data[arrIndex];
//
//        myChart.setOption(option);
//    });
//
//
//}



//
line2()
function line2(){
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('daoshi'));

        var dataMap = {};
        var result = [];
    function dataFormatter(obj) {
        var pList = ['1', '2', '3', '4', '5', '6','7','8','9','10','11','12'];
        var temp;
        for (var year = 2014; year <= 2016; year++) {
            var max = 0;
            var sum = 0;
            temp = obj[year];
            for (var i = 0, l = temp.length; i < l; i++) {
                max = Math.max(max, temp[i]);
                sum += temp[i];
                obj[year][i] = {
                    name: pList[i],
                    value: temp[i]
                }
            }
            obj[year + 'max'] = Math.floor(max / 100) * 100;
            obj[year + 'sum'] = sum;
        }
        return obj;
    }

    dataMap.dataGDP = dataFormatter({
        2016: [1719, 7128, 3687, 2843, 1517, 3778,2222,1111,3333,3333,44444,55555],
        2015: [2062, 11011, 5119, 4038, 3237, 3748,2062, 11011, 5119, 4038, 3237, 3748],
        2014: [6711, 10373, 5108, 2796, 4598, 2653,2062, 11011, 5119, 4038, 3237, 3748],
    });

//    console.log(dataMap.dataGDP['2014'])

    var option = {
        baseOption: {
            timeline: {
                // y: 0,
                axisType: 'category',
                // realtime: false,
                // loop: false,
                autoPlay: true,
                // currentIndex: 2,
                playInterval: 2000,
                // controlStyle: {
                //     position: 'left'
                // },
                data: [
                    '2014', '2015', '2016'
                ],
                itemStyle:{
                    emphasis:{
                        color:'#63C0EB'
                    }
                },
                checkpointStyle:{
                    color:'#63C0EB',
                    borderColor:'#63C0EB'
                }

            },
            title:{
                left:'center'
            },
            legend:{
                data: ['用户点击次数', '关注人数'],
                selected: {
                    '用户点击次数': true,
                    '关注人数': false
                },
                selectedMode:'single',
                right:'right'
            },
            tooltip: {},
            calculable: true,
            grid: {
                top: 80,
                bottom: 100
            },
            xAxis: [{
                'type': 'category',
                'axisLabel': {
                    'interval': 0
                },
                'data': ['谢华', '吴松', '刘冰', '陈华', '李爽', '王超','王磊','李武','程度','无心','李恒','王贺'],
                splitLine: {
                    show: false
                }
            }],
            yAxis: [{
                type: 'value',
                name: '用户点击次数'
            },{
                type: 'value',
                name: '关注人数'
            }],
            series: [{
                name: '用户点击次数',
                type: 'bar',
                itemStyle:{
                    normal:{
                        color:'#E1A5DB'
                    }
                }
            },{
                name: '关注人数',
                type: 'bar',
                itemStyle:{
                    normal:{
                        color:'#87F1A9'
                    }
                }
            }]
        },
        options: [{
            title: {
                text: '2014全国热门导师统计'
            },
            series: [{
                data: dataMap.dataGDP['2014']
            },{
                yAxisIndex: 1,
                data: dataMap.dataGDP['2015']
            }]
        }, {
            title: {
                text: '2014全国热门导师统计'
            },
            series: [{
                data: dataMap.dataGDP['2015']
            },{
                yAxisIndex: 1,
                data: dataMap.dataGDP['2016']
            }]
        }, {
            title: {
                text: '2014全国热门导师统计'
            },
            series: [{
                data: dataMap.dataGDP['2016']
            },{
                yAxisIndex: 1,
                data: dataMap.dataGDP['2014']
            }]
        },]
    };
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);


//        myChart.on('timelinechanged', function(timelineIndex){
//// 设置 每个series里的xAxis里的值
//            var arrIndex = parseInt(timelineIndex.currentIndex);
//                option.baseOption.xAxis[0].data=['1', '2', '3', '7', '7', '7','7','8','9','10','11','12'];
////            debugger;
////            result = ['1', '2', '3', '4', '5', '6','7','8','9','10','11','12'];
////            if (arrIndex == 5) // 这里 5可理解为timeline节点数组的长度,此处的目的是防止 5.xAxis not found
////                arrIndex = 0
////            option.options[arrIndex].xAxis.data=data[arrIndex];
//            myChart.setOption(option);
//        });

        myChart.on('legendselectchanged',function (params) {
            console.log(params);

        })

    }




//饼状图
var year = 2016,type=0;
$('#chooseYear').on('change',function () {
   year = $(this).val();
    getPicData(type,year);
});
$('.buttonPie').on('click','div',function () {
    $(this).addClass('pic-active').siblings().removeClass('pic-active');
    type=$(this).index();
    getPicData(type,year);
})
getPicData(type,year);
function getPicData(type,year) {
    $.ajax({
        url:'http://114.112.96.184:18080/statistics/hotField?'+'year='+year+'&'+'type='+type,
        type:'get',
        dataType:'JSON',
        success:function(data){
            var data =  data.result;
            console.log(data)
            var legendData =[];
            var seriesData = [];

            for (var i = 0; i<data.length;i++){
                legendData.push(data[i].name);
            }

            for (var j = 0; j<data.length;j++ ){
                var obj= {};
                obj.name=data[j].name;
                obj.value=data[j].num;
                seriesData.push(obj)
            }
            pic(legendData,seriesData)
        }
    })

}
function pic(legendData,seriesData){
        var myChart = echarts.init(document.getElementById('pic1'));

        var option = {
            title:{
                text:'全国热门投资领域统计',
                left:'center'
            },
            tooltip: {
                trigger: 'item',
                formatter: "{a} <br/>{b} : {c} ({d}%)"
            },
            legend: {
                orient: 'horizontal',
                top:'40',
                left: 'center',
                data: legendData
            },
            series: [{
                type: 'pie',
                radius: '50%',
                center: ['50%', '60%'],
                clockwise: false,
                data: seriesData,
                label: {
                    normal: {
                        textStyle: {
                            color: '#999',
                            fontSize: '14px'
                        }
                    }
                },
                labelLine: {
                    normal: {
                        show: false
                    }
                },
                itemStyle: {
                    normal: {
                        borderWidth: 4,
                        borderColor: '#ffffff'
                    },
                    emphasis: {
                        borderWidth: 0,
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                }
            }],
            color: [
                '#00acee',
                '#52cdd5',
                '#79d9f1',
                '#a7e7ff',
                '#c8efff'
            ]
        };

        myChart.setOption(option);



    }





//地图部分
var yearMap=2016,typeMap=0;
getMapData(type,year);
$('.buttonMap').on('click','div',function () {
    $(this).addClass('pic-active').siblings().removeClass('pic-active');
    typeMap=$(this).index();
    getMapData(typeMap,yearMap)
})
$('#chooseMapYear').on('change',function () {
    yearMap = $(this).val();
    getMapData(typeMap,yearMap)
});
function getMapData(type,year) {
    $.ajax({
        url:'http://114.112.96.184:18080/statistics/pbArea?'+'year='+year+'&'+'type='+type,
        type:'get',
        dataType:'JSON',
        success:function(data){
            var data =  data.result;
            var datas = [];
            for (var i = 0; i<data.length;i++){
                var obj = {}
                obj.name=data[i].area.substring(0,data[i].area.length-1);
                obj.value=data[i].num;
                datas.push(obj)
            }
            console.log(datas)
            map(datas);
        }
    })

}
function map(datas){
        var myChart = echarts.init(document.getElementById('map'));

//        function randomData() {
//    return Math.round(Math.random()*2500);
//}

var option = {
    tooltip: {
        trigger: 'item',
        formatter: '{b}'
    },
    visualMap: {
        seriesIndex: 0,
        min: 0,
        max: 500,
        left: 'left',
        top: 'bottom',
        text: ['高','低'],           // 文本，默认为数值文本
        calculable: true
    },
    grid: {
        height: 200,
        width: 8,
        right: 80,
        bottom: 10
    },
    xAxis: {
        type: 'category',
        data: [],
        splitNumber: 1,
        show: false
    },
    yAxis: {
        position: 'right',
        min: 0,
        max: 20,
        splitNumber: 20,
        inverse: true,
        axisLabel: {
            show: true
        },
        axisLine: {
            show: false
        },
        splitLine: {
            show: false
        },
        axisTick: {
            show: false
        },
        data: []
    },
    series: [
        {
            zlevel: 1,
            name: '中国',
            type: 'map',
            mapType: 'china',
            selectedMode : 'multiple',
            roam: true,
            left: 0,
            right: '15%',
            label: {
                normal: {
                    show: true
                },
                emphasis: {
                    show: true
                }
            },
            data:datas
//                {name: '北京',value: randomData() },
//                {name: '天津',value: randomData() },
//                {name: '上海',value: randomData() },
//                {name: '重庆',value: randomData() },
//                {name: '河北',value: randomData() },
//                {name: '河南',value: randomData() },
//                {name: '云南',value: randomData() },
//                {name: '辽宁',value: randomData() },
//                {name: '黑龙江',value: randomData() },
//                {name: '湖南',value: randomData() },
//                {name: '安徽',value: randomData() },
//                {name: '山东',value: randomData() },
//                {name: '新疆',value: randomData() },
//                {name: '江苏',value: randomData() },
//                {name: '浙江',value: randomData() },
//                {name: '江西',value: randomData() },
//                {name: '湖北',value: randomData() },
//                {name: '广西',value: randomData() },
//                {name: '甘肃',value: randomData() },
//                {name: '山西',value: randomData() },
//                {name: '内蒙古',value: randomData() },
//                {name: '陕西',value: randomData() },
//                {name: '吉林',value: randomData() },
//                {name: '福建',value: randomData() },
//                {name: '贵州',value: randomData() },
//                {name: '广东',value: randomData() },
//                {name: '青海',value: randomData() },
//                {name: '西藏',value: randomData() },
//                {name: '四川',value: randomData() },
//                {name: '宁夏',value: randomData() },
//                {name: '海南',value: randomData() },
//                {name: '台湾',value: randomData() },
//                {name: '香港',value: randomData() },
//                {name: '澳门',value: randomData() }

        }
    ]
};





/**
 * 根据值获取线性渐变颜色
 * @param  {String} start 起始颜色
 * @param  {String} end   结束颜色
 * @param  {Number} max   最多分成多少分
 * @param  {Number} val   渐变取值
 * @return {String}       颜色
 */
//function getGradientColor (start, end, max, val) {
//    var rgb = /#((?:[0-9]|[a-fA-F]){2})((?:[0-9]|[a-fA-F]){2})((?:[0-9]|[a-fA-F]){2})/;
//    var sM = start.match(rgb);
//    var eM = end.match(rgb);
//    var err = '';
//    max = max || 1
//    val = val || 0
//    if (sM === null) {
//        err = 'start';
//    }
//    if (eM === null) {
//        err = 'end';
//    }
//    if (err.length > 0) {
//        throw new Error('Invalid ' + err + ' color format, required hex color');
//    }
//    var sR = parseInt(sM[1], 16),
//        sG = parseInt(sM[2], 16),
//        sB = parseInt(sM[3], 16);
//    var eR = parseInt(eM[1], 16),
//        eG = parseInt(eM[2], 16),
//        eB = parseInt(eM[3], 16);
//    var p = val / max;
//    var gR = Math.round(sR + (eR - sR) * p).toString(16),
//        gG = Math.round(sG + (eG - sG) * p).toString(16),
//        gB = Math.round(sB + (eB - sB) * p).toString(16);
//    return '#' + gR + gG + gB;
//}
//
//setTimeout(function() {
//    var TOPN = 25
//
//    var option = myChart.getOption()
//    // 修改top
//    option.grid[0].height = TOPN * 20
//    option.yAxis[0].max = TOPN
//    option.yAxis[0].splitNumber = TOPN
//    option.series[1].data[0] = TOPN
//    // 排序
//    var data = option.series[0].data.sort(function(a, b) {
//        return b.value - a.value
//    })
//
//    var maxValue = data[0].value,
//        minValue = data.length > TOPN ? data[TOPN - 1].value : data[data.length - 1].value
//
//    var s = option.visualMap[0].controller.inRange.color[0],
//        e = option.visualMap[0].controller.inRange.color.slice(-1)[0]
//    var sColor = getGradientColor(s, e, maxValue, minValue)
//    var eColor = getGradientColor(s, e, maxValue, maxValue)
//
//    option.series[1].itemStyle.normal.color = new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
//        offset: 1,
//        color: sColor
//    }, {
//        offset: 0,
//        color: eColor
//    }])
//
//    // yAxis
//    var newYAxisArr = []
//    echarts.util.each(data, function(item, i) {
//        if (i >= TOPN) {
//            return false
//        }
//        var c = getGradientColor(sColor, eColor, maxValue, item.value)
//        newYAxisArr.push({
//            value: item.name,
//            textStyle: {
//                color: c
//            }
//        })
//    })
//    option.yAxis[0].data = newYAxisArr
//    option.yAxis[0].axisLabel.formatter = (function(data) {
//        return function(value, i) {
//            if (!value) return ''
//            return value + ' ' + data[i].value
//        }
//    })(data)
//    myChart.setOption(option)
//}, 0);
        myChart.setOption(option);
    }


    </script>
</html>
